<template>
    <div class="pkg-detail">
        <div class="main">
            <VideoBanner v-if="detail"
                :video="detail.video"
                :images="detail.cover"
                :has-share-box="false"
                @share="onChangeShareBoxVisible" />

            <PkgDescBar v-if="detail"
                :value1="detail.modelling + '套'"
                :value2="detail.photo + '张'"
                :value3="detail.truing + '张'" />

            <div v-if="detail && shopDetail" class="header">
                <div class="countBox" v-if="countdownTime">
                    <div class="countBgOneNew color-red" style="background-size: 100% 100%;height: 101rpx;">
                        <div class="countBgOne_le">
                            <div style="font-size:22rpx;height: 40rpx;line-height: 60rpx;color:#FD094F;font-weight: bold;">活动价</div>
                            <div style="height: 50rpx;line-height: 50rpx;color:#FD094F;font-weight: bold;">
                                <span class="text-huge">¥</span>
                                <span class="number-huge">{{oldPriceText}}</span>
                            </div>
                        </div>
                        <div class="countBgOne_ri">
                            <span v-if="displayPriceText" class="product-detail__price-item text-small grey-text-color text-through">¥{{displayPriceText}}</span>
                        </div>
                    </div>
                    <div class="countBgThree"></div>
                    <div class="countdownright" style="color:#fff;">
                        <div style="font-size:26rpx;">活动结束倒计时</div>
                        <!-- <van-count-down class="product-detail__countdown" style="color：#fff;" :time="countdownTime" :auto-start="true" format="HH： mm： ss"/> -->
                        <van-count-down :time="countdownTime" style="margin-top: 6rpx;">
                        <template #default="timeData">
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.days  }}</span>
                            <span style="color:#fff;font-size: 10px;font-weight: bold;padding-right:4rpx;">天</span>
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.hours > 9? timeData.hours : '0' + timeData.hours  }}</span>
                            <span style="color:#fff;font-size: 10px;font-weight: bold;padding-right:4rpx;">:</span>
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.minutes > 9? timeData.minutes : '0' + timeData.minutes  }}</span>
                            <span style="color:#fff;font-size: 10px;font-weight: bold;padding-right:4rpx;">:</span>
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.seconds > 9? timeData.seconds : '0' + timeData.seconds }}</span>
                        </template>
                        </van-count-down>
                    </div>
                </div>
                <!-- <div v-if="countdownTime" class="pkg-detail__countdown-wrap">活动结束倒计时 <van-count-down class="pkg-detail__countdown" :time="countdownTime" :auto-start="true" format="HH时 mm分 ss秒"/></div> -->

                <div class="good-info">
                    <div class="title">
                        <span v-if="detail.tag" class="font-bold text-tiny gold-label">{{detail.tag}}</span>
                        <span class="font-bold text-giant">{{detail.name}}</span>
                        <span v-if="shopDetail" class="text-tiny store-name grey-text-color">婚纱摄影·{{shopDetail.name}}</span>
                    </div>
                    <div class="clearfix">
                        <div v-if="showCopyButton" class="pkg-detail__price-copy-btn" v-clipboard="detail.name">复制分享</div>
                        <div class="pkg-detail__price">
                            <span class="color-font-red">
                                <span class="text-huge">¥</span>
                                <span class="number-huge">{{oldPriceText}}</span>
                            </span>
                            <span v-if="displayPriceText" class="product-detail__price-item text-small grey-text-color text-through">¥{{displayPriceText}}</span>
                            <span v-if="rebateRange" class="product-detail__price-item">{{rebateLabel}} <span class="color-red">￥{{rebateRange}}</span></span>
                            <span class="product-detail__price-item text-small grey-color">销量 {{detail.sales_volume}}</span>
                        </div>
                    </div>
                    <!-- <div class="ad-buy text-small" v-if="detail.prepay" @click="submitOrder('book')">
                        <span>·可支付<span class="color-font-red">{{prepayText}}</span>元定金，下单七天内可退</span>
                        <span class="icon">&#xe770;</span>
                    </div> -->
                </div>
            </div>

            <!-- 优惠 -->
            <div v-if="showDiscount" class="separation"></div>
            <PkgDiscountNew v-if="showDiscount" :pkgId="pkgId" :price="realPrice" @click="openSpec" /> <!--  @click="toSpecDetail" -->

            <!-- 服务 -->
            <div v-if="getServiceList.length > 0" class="separation"></div>
            <div class="serviceBox" v-if="getServiceList.length > 0" style="padding: 9px 24rpx 0rpx 22px;" @click="openService" >
                <div class="serviceBox_tit">服务</div>
                <div class="serviceBox_con">
                    <template v-for="(item,index) in getServiceList">
                        <div class="serviceBox_con_item"  :key="index" v-if="index < 3">
                            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/yesRight_icon.png" class="serviceBox_con_item_img" alt="">
                            <div>{{item.name}}</div>
                        </div>
                    </template>
                    
                    <!-- <div class="serviceBox_con_item">
                        <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/yesRight_icon.png" class="serviceBox_con_item_img" alt="">
                        <div>无忧售后</div>
                    </div>
                    <div class="serviceBox_con_item">
                        <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/yesRight_icon.png" class="serviceBox_con_item_img" alt="">
                        <div>急速退款</div>
                    </div> -->
                </div>
                <div class="discount_lump_icon">
                    <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
                </div>
            </div>
            
            <!-- 评价 -->
            <div v-if="commentCount && commentCount.count > 0" class="separation"></div>
            <div v-if="commentCount && commentCount.count > 0" class="evaluation">
                <div class="title" @click="onClickComments">
                    <div class="text-large font-bold">
                        用户评价（{{commentCount.count}}）
                    </div>
                    <div class="text-normal">
                        <span>好评率{{commentCount.favorable}}%</span>
                        <span class="icon">&#xe770;</span>
                    </div>
                </div>
                <CommentItem v-for="(comment, index) in comments"
                    :key="index"
                    :avatar="comment.avatar"
                    :name="comment.nickname"
                    :rate="comment.score"
                    :content="comment.content"
                    :date="comment.created_at"
                    :images="comment.image" />
                <div class="watch-more text-center text-normal blue-color" @click="onClickComments">
                    查看全部评价
                </div>
            </div>

            <!-- 店铺信息 -->
            <div v-if="shopDetail" class="separation"></div>
            <ShopInfoBar v-if="shopDetail"
                :isPhotography="true"
                :cover="shopDetail.cover"
                :name="shopDetail.name"
                :tag="shopDetail.tag"
                :pkg="shopDetail.package_number"
                :visitor-number="shopDetail.visitor"
                :phone="shopDetail.phone"
                @click="onClickShop" />

            <!-- 店铺推荐 -->
            <div v-if="recommendList.length > 0" class="store-recommend">
                <div class="title text-normal">店铺推荐</div>
                    <div class="inner">
                        <PkgRecommendItem v-for="(item, index) in recommendList"
                            :key="index"
                            :cover="item.recommend_cover ? item.recommend_cover : item.cover"
                            :name="item.name"
                            :price="item.price"
                            :original-price="item.display_price"
                            @click="onClickRecommend(item)" />
                </div>
            </div>

            <!-- 套餐详情 -->
            <div class="detail">
                <LineTitle value="套餐详情" :has-pad="true" :container-class="['bg-default']" :line-class="['color-font-4']" />
                <wx-sticky>
                    <CommonNav v-model="detailNav" :navs="detailNavs" />
                </wx-sticky>
                <div class="content text-small">
                    <div v-if="detailNav === 'introduction' && detail">
                        <RichText :content="description"></RichText>
                    </div>
                    <div v-if="detailNav === 'service' && detail" class="service-box">
                        <ServiceItem v-for="(item, aindex) in productSpec" @change="onClickChangePackage(aindex)" :key="aindex" :name="item.attr" :value="sureGoodsSpec[aindex]" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 分享按钮 -->
        <div class="fixed-center" v-if="shareBoxVisible" @click="shareBoxVisible = false">
            <div class="share-box">
                <wx-button open-type="share" class="item share">
                    <img mode="aspectFill" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/message.jpg" />
                    <div class="text-normal font-bold">好友/群</div>
                </wx-button>
                <button class="item" @click="showTimeline">
                    <img mode="aspectFill" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/timeline.jpg" />
                    <div class="text-normal font-bold">发朋友圈</div>
                </button>
            </div>
        </div>

        <!-- 底部内容 -->
        <div class="fixed-bottom">
            <div class="btn-box">
                <div class="price">
                    <span class="text-small">总计：</span>
                    <span class="text-huge color-font-red">¥{{realPrice | currency}}</span>
                </div>
                <!-- <div class="btn btn-mobile btn-large btn-white-yellow btn-rect" @click="onClickChangePackage">调整套餐</div> -->
                <MobileButton name="white-red" class="btn-large btn-redt" :is-disabled="detail.status != 'on'" @click="submitOrder('all')">{{detail.status === 'on' ? '提交订单' : '商品下架'}}</MobileButton>
            </div>
        </div>
        <div class="share-btn" @click.stop="onChangeShareBoxVisible">
            推荐好友
        </div>
        <!-- 服务弹窗 -->
        <ServicePopup v-if="serviceVisible"
            :detail="getServiceList"
            :service-id="1"
            :count-visible="true"
            @close="onCloseSpecPopup"
            @toSpecDetail="toSpecDetail">
        </ServicePopup>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import {
    placeholderImg,
    currency,
    is,
    formatRichText,
    objScene,
    dateParse,
} from '@/lib/utils';
import {
    ROUTE_NAME,
    STATUS_LOGIN_LOGINED,
} from '@/lib/constant';
import store from '@/store';
import CommonNav from '@/components/nav/commonNav.vue';
import PkgDescBar from '@/features/pkg/descBar.vue';
import CommentItem from '@/features/comment/commentItem.vue';
import VideoBanner from '@/components/common/videoBanner.vue';
import PkgRecommendItem from '@/features/pkg/recommendItem.vue';
import ServiceItem from '@/features/pkg/serviceItem.vue';
import ShopInfoBar from '@/features/shop/infoBar.vue';
import LineTitle from '@/components/common/lineTitle.vue';
import RichText from '@/features/utils/richText.vue';
import PkgDiscountNew from '@/module/pkg/components/discount.vue';

import ServicePopup from '@/features/good/servicePopup.vue';

import { Component, Vue, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { stat } from 'fs';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'PkgDetail',
    components: {
        CommonNav,
        PkgDescBar,
        CommentItem,
        VideoBanner,
        PkgRecommendItem,
        ServiceItem,
        ShopInfoBar,
        LineTitle,
        RichText,
        PkgDiscountNew,
        ServicePopup,
    },
})
export default class PkgDetail extends Vue {
    public serviceVisible: any = false; // 服务弹窗
    public detailNav: any = 'introduction';

    public detailNavs: any = [
        { text1: '图文介绍', value: 'introduction' },
        { text1: '服务内容', value: 'service' },
    ];
    public countdownTime: number | null = null;
    public placeholderImg: any = placeholderImg;
    public shareBoxVisible: any = false;
    public startTop: any = 0;
    public tabFixed: any = false;


    public openService(){
        this.serviceVisible = true;
    }
    public onCloseSpecPopup (){
        this.serviceVisible = false;
    }

    // 获取服务列表
    public get getServiceList(){
        var key =  this.pkgId +'_';
        return this.pkgId && store.state.shop.taoxiservierPopupList[key] ? store.state.shop.taoxiservierPopupList[key] : [];
    }

    public get scene() {
        return store.state.utils.scene;
    }
    /** 套餐id */
    public get pkgId() {
        return this.scene && this.scene.pkg_id ? this.scene.pkg_id : this.$route.params.pkgId;
    }
    public get referrer() {
        return this.$route.query.referrer;
    }
    /** 门店id */
    public get shopId() {
        return this.detail.shop_id;
    }
    /** 是否来自于分享 */
    public get isFromShare() {
        return this.scene && this.scene.id ? true : !!this.referrer;
    }
    public get systemInfo() {
        return store.state.utils.systemInfo;
    }
    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    public get hasLogin() {
        return store.state.auth.hasLogin;
    }

    public get menuButtonRect() {
        return store.state.utils.menuButtonClientRect;
    }

    public get goodsCouponList() {
        return store.state.user.goodsCouponList;
    }

    /** 店铺详情 */
    public get shopDetailMap() {
        return store.state.shop.shopDetailMap;
    }

    /** 店铺推荐 */
    public get shopRecommendListMap() {
        return store.state.shop.shopRecommendListMap;
    }

    /** 商品列表 */
    public get productList() {
        return store.state.pkg.productList;
    }

    public get productMap() {
        return store.state.pkg.productMap;
    }

    public get posterMap() {
        return store.state.pkg.posterMap;
    }

    public get productSpecMap() {
        return store.state.pkg.productSpecMap;
    }

    public get sureGoodsSpecMap() {
        return store.state.pkg.sureGoodsSpecMap;
    }

    /** 评价 */
    public get commentsMap() {
        return store.state.pkg.comments;
    }

    /** 评价数量 */
    public get commentCountMap() {
        return store.state.pkg.commentCount;
    }

    public get isIPhoneXSeries() {
        return store.state;
    }

    public get statusBarHeight() {
        return this.systemInfo ? this.systemInfo.statusBarHeight : 0;
    }

    // public get fixedTop() {
    //     return (this.menuButtonRect.top - this.statusBarHeight) * 2 + this.statusBarHeight + this.menuButtonRect.height;
    // }

    // 优惠信息
    public get goodsCoupon() {
        const key = `pkg_${this.pkgId}_${this.shopId}`;
        return this.goodsCouponList[key] ? this.goodsCouponList[key].map((item: any) => {
            return Object.assign(item, {
                price_limit: currency(item.price_limit),
                money: currency(item.money),
            });
        }) : [];
    }

    /** 套系详情 */
    public get detail() {
        return store.state.pkg.productDetailMap[this.pkgId];
    }

    public get description() {
        return this.detail && this.detail.description ? formatRichText(this.detail.description) : '';
    }

    public get poster() {
        return this.pkgId && this.posterMap[this.pkgId] ? this.posterMap[this.pkgId] : null;
    }

    /** 门店信息 */
    public get shopDetail() {
        return this.shopDetailMap[this.shopId] || null;
    }

    /** 规格 */
    public get productSpec() {
        return this.pkgId && this.productSpecMap[this.pkgId] ? this.productSpecMap[this.pkgId] : [];
    }

    /** 评价数据 */
    public get comments() {
        const wrap = this.commentsMap[this.pkgId] || {
            list: [],
            loaded: false,
            req: false,
        };
        return wrap.list.slice(0, 1);
    }

    /** 评价数量 */
    public get commentCount() {
        return this.commentCountMap[this.pkgId] ? {
            count: this.commentCountMap[this.pkgId].count,
            favorable: Math.floor(this.commentCountMap[this.pkgId].favorable / this.commentCountMap[this.pkgId].count * 100),
        } : {
            count: '-',
            favorable: '-',
        };
    }

    public get sureGoodsSpec() {
        return this.pkgId && this.sureGoodsSpecMap[this.pkgId] ? this.sureGoodsSpecMap[this.pkgId] : [];
    }

    /** 商品列表 */
    public get recommendList() {
        return this.shopId && this.shopRecommendListMap[this.shopId] ? this.shopRecommendListMap[this.shopId].slice(0, 4) : [];
    }

    public get selectedGoodsSpecMap() {
        return store.state.pkg.selectedGoodsSpecMap;
    }
    public get selectedGoodsSpec() {
        return this.pkgId && this.selectedGoodsSpecMap[this.pkgId] ? this.selectedGoodsSpecMap[this.pkgId] : [];
    }

    /** 原本价格 */
    // oldPrice() {
    //     if (this.detail && this.productSpec.length) {
    //         const optionList = this.productSpec.map((item) => {
    //             return item.values.filter(val => {
    //                 return val.is_default;
    //             });
    //         }).flat(Infinity);
    //         const priceObj = optionList.reduce((prev, next) => {
    //             return {
    //                 price: Number(currency(prev.price * prev.discount)) + Number(currency(next.price * next.discount)),
    //                 discount: 100,
    //             };
    //         }, {
    //             price: 0,
    //             discount: 100,
    //         });
    //         return Number(this.detail.price) + Number(priceObj.price) * 100;
    //     }
    //     return 0;
    // },

    /** 原本价格 */
    public get oldPriceText() {
        return currency(this.detail?.price || 0);
    }
    /** 展示价格 */
    public get displayPriceText() {
        return currency(this.detail?.display_price || 0);
    }

    public get defaultSpecPrice() {
        if (this.detail && this.productSpec.length) {
            let total = 0;
            this.productSpec.map((item: any) => {
                return item.values.filter((val: any) => {
                    return val.is_default;
                });
            }).forEach((item: any) => {
                item.forEach((val: any) => {
                    total += Number(currency(val.price * val.discount * val.number));
                });
            });
            return total * 100;
        }
        return 0;
    }

    /** 现在价格 */
    public get realPrice() {
        if (this.detail) {
            if (this.sureGoodsSpec.length) {
                let total = 0;
                this.sureGoodsSpec.forEach((item: any) => {
                    item.forEach((val: any) => {
                        total += Number(currency(val.price * val.discount * val.number));
                    });
                });
                return Number(this.detail.price) + total * 100 - this.defaultSpecPrice;
            }
            return Number(this.detail.price);
        }
        return 0;
    }

    /** 是否显示复制按钮 */
    public get showCopyButton() {
        if (this.userBasicInfo.level <= 0) {
            return false;
        } else if (this.userBasicInfo.level > 1) {
            return true;
        } else {
            const list = store.state.user.memberShopList;
            return list.find((item) => item.shop_id === this.detail.shop_id);
        }
    }
    public get rebateLabel() {
        const list = [
            '返利',
            '推荐返还',
            '推荐分红',
            '推荐提成',
        ];
        return this.userBasicInfo ? list[this.userBasicInfo.level] : '';
    }
    public get rebateRange() {
        const basicInfo = this.userBasicInfo;
        if (!basicInfo || !this.detail) {
            return null;
        }
        if (basicInfo.level === 1) {
            const shops = store.state.user.memberShopList || [];
            const find = shops.find((shop) => shop.shop_id === this.detail.shop_id);
            if (!find) {
                return null;
            }
        }

        const rule = store.state.pkg.rebateRule[this.pkgId];
        if (!rule) {
            return null;
        }
        const level = basicInfo.level;
        if (level === 1) {
            return currency(rule.level1_rebate);
        } else if (level === 2) {
            return currency(rule.level2_rebate);
        } else if (level === 3) {
            this.checkUser()
            // this.IsJiTuan == false  非集团  level4_rebate
            return [ currency(this.IsJiTuan == true? rule.level3_rebate: rule.level4_rebate || 0), currency(rule.level_2_3_rebate || 0)].join('/');
        }
        return null;
    }
    public IsJiTuan: any = false;
    public async checkUser() {
        const res = await store.dispatch('pkg/getCheckUser', {
            shop_id: this.detail.shop_id,
            user_id: this.userBasicInfo.id,
        });
        if (res.status == 0) {
            this.IsJiTuan = res.data;
        }

    }
    
    /** 优惠信息 */
    public get discount() {
        return store.state.pkg.discount[this.pkgId] || {
            full_reduction: [],
            discount:[],
            gift: [],
        };
    }
    /** 是否显示discount */
    public get showDiscount() {
        const fullReduction = this.discount.full_reduction;
        const discount = this.discount.discount;
        const gift = this.discount.gift;
        return (fullReduction && fullReduction.length) || (gift && gift.length) || (discount && discount.length);
    }
    public async showTimeline() {
        store.commit('utils/startRequest');
        await store.dispatch('pkg/getPoster', {
            pkgId: this.pkgId,
        });
        store.commit('utils/endRequest');
        
        store.commit('utils/setImagePopup', {
            visible: true,
            src: this.poster,
        });
    }

    public onChangeShareBoxVisible() {
        this.shareBoxVisible = !this.shareBoxVisible;
    }

    /**
     * 去调整套餐页
     */
    public onClickChangePackage(aindex: any) {
        // api.navigateTo({
        //     url: '/pages/pkg_revision/main',
        //     query: {
        //         pkg_id: this.pkgId,
        //         spec_index: aindex + '',
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_REVISION,
            params: {
                pkgId: this.pkgId + '',
                specIndex: aindex + '',
            },
        });
    }
    public getDefaultSpecPrice() {
        if (!this.detail || !this.productSpec.length) {
            return 0;
        }

        const defaultList: Pkg.SpecValue[] = this.productSpec.map((item) => {
            return item.values.filter((val) => {
                return val.is_default;
            });
            // @ts-ignore
        }).flat(Infinity);
        // 以分为单位
        const price = defaultList.reduce((prev, item) => {
            return prev + Number(item.price) * item.discount * item.number;
        }, 0);
        return price;
    }
    public getCurrentSpecPrice() {
        if (!this.selectedGoodsSpec.length) {
            return 0;
        }

        // 以分为单位
        return this.selectedGoodsSpec.reduce((prev, item) => {
            let total = 0;
            item.forEach((val) => {
                total += Number(val.price) * val.discount * val.number;
            });
            return prev + total;
        }, 0);
    }
    /**
     * 提交订单
     */
    public submitOrder(type: 'all') {
        // 确认所有的套餐内容都是正确的
        // 检查价格是否大于默认产品
        if (this.getCurrentSpecPrice() < this.getDefaultSpecPrice()) {
            wx.showToast({
                title: '调整产品不得低于默认产品价格',
                icon: 'none',
            });
            return;
        }

        // api.navigateTo({
        //     url: '/pages/pkg_order/main',
        //     query: {
        //         shop_id: this.shopId,
        //         pkg_id: this.pkgId,
        //         type: type,
        //         is_from_share: this.isFromShare + '',
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_ORDER,
            params: {
                pkgId: this.pkgId + '',
                shopId: this.shopId + '',
                type,
                isFromShare: this.isFromShare + '',
            },
            query: {
                referrer: this.referrer,
            },
        });
    }

    // 新加优惠列表跳转详情
    public toSpecDetail() {
        const shopDetailId = String(this.shopDetail.id);
        // api.navigateTo({
        //     url: '/pages/spec_detail/main',
        //     query: {
        //         pkg_id: this.id,
        //         spec_index: this.specIndex,
        //         val_index: index,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.MALL_SPEC_DETAIL,
            query: {
                pkgId: shopDetailId,
                specIndex: '0',
                valIndex: '0',
            },
        });
    }

    /**
     * 点击门店信息
     */
    public onClickShop() {
        // api.navigateTo({
        //     url: '/pages/shop_bridal/main',
        //     query: {
        //         shop_id: this.shopDetail.id,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.SHOP_BRIDAL,
            params: {
                shopId: this.shopDetail.id + '',
            },
        });
    }

    /**
     * 点击推荐
     */
    public onClickRecommend(pkg: Pkg.ListItem) {
        // api.navigateTo({
        //     url: '/pages/pkg_detail/main',
        //     query: {
        //         pkg_id: pkg.id,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_DETAIL,
            params: {
                pkgId: pkg.id + '',
            },
        });
    }
    public onClickComments() {
        // api.navigateTo({
        //     url: '/pages/pkg_comments/main',
        //     query: {
        //         good_id: this.pkgId,
        //         type: 'pkg',
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_COMMENT,
            params: {
                goodId: this.pkgId + '',
                type: 'pkg',
            },
        });
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        const pkgId = to.params.pkgId;
        store.commit('utils/startRequest');
        await store.dispatch('pkg/getDetail', {
            id: pkgId,
        });
        await Promise.all([
            store.dispatch('pkg/getProductSpec', {
                pkgId,
            }),
            store.dispatch('pkg/addVisitor', {
                pkgId,
            }),
            store.dispatch('pkg/getComments', {
                pkgId,
                offset: 0,
                count: 5,
            }),
            store.dispatch('pkg/getCommentCount', {
                pkgId,
            }),
            store.dispatch('pkg/getRebateRule', {
                pkgId,
            }),
            // store.dispatch('pkg/getProductList', {
            //     shopId: this.shopId,
            //     category: null,
            //     sort: null,
            //     screen: null,
            //     offset: this.recommendList.length,
            //     count: 10,
            // }),
            store.dispatch('user/getMemberShopList', {
                offset: 0,
                count: 1000,
            }),
        ]);
        store.commit('utils/endRequest');
        next();
    }


    public created() {
        this.shareBoxVisible = false;
        this.startTop = 0;
        this.tabFixed = false;
        const endTime = this.detail.end_time;
        if (endTime) {
            const time = dateParse(endTime).valueOf() - Date.now();
            if (time > 0) {
                this.countdownTime = time;
            }
        }

        store.dispatch('pkg/getDiscount', {
            pkgId: this.pkgId,
            referrer: this.referrer,
        });
        store.dispatch('shop/getShopDetail', {
            shopId: this.shopId,
        });
        store.dispatch('shop/getShopRecommendList', {
            shopId: this.shopId,
        });

        // 获取套系服务列表数据
        store.dispatch('shop/getTaoxiServierPopupList', {
            id:this.pkgId
        })

        // const t = this;
        // const timer = setTimeout(() => {
        //     const queryA = wx.createSelectorQuery();
        //     queryA.select('#tab').boundingClientRect();
        //     queryA.exec(function(res) {
        //         const tabClientRect = res[0];
        //         t.startTop = tabClientRect.top;
        //     });
        //     clearTimeout(timer);
        // }, 300);

        window.onShareAppMessage = (res) => {
            store.dispatch('pkg/addShare', {
                pkgId: this.pkgId,
            });

            const url = this.$router.resolve({
                name: ROUTE_NAME.PKG_DETAIL,
                params: {
                    pkgId: this.pkgId,
                },
                query: {
                    referrer: this.userBasicInfo.id + '',
                },
            }).route.fullPath;

            return {
                title: this.detail.name,
                imageUrl: this.detail.cover[0],
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        }
    }
    public beforeDestroy() {
        if (store.state.utils.imagePopup.visible) {
            store.commit('utils/setImagePopup', {
                visible: false,
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.pkg-detail {
    padding-bottom: 50px;

    // 倒计时
    .countBox{
        width: 100%;
        background:linear-gradient(to right,#F42E90,#FD094F);
        position: relative;
        height: 150rpx;
    }
    .countBgOneNew{
        position: absolute;
        top: 30rpx;
        left: 20rpx;
        min-width: 35%;
        // max-width: 45%;
        line-height: 80rpx;
        border-radius: 10rpx;
        z-index: 1;
        display: flex;
        background: url('https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/activity.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-right: 30rpx;
    }
    .countBgOne_le{
        text-align: center;
        box-sizing: border-box;
        padding-left: 20rpx;
        padding-right: 10rpx;
    }
    .countBgOne_ri{
        box-sizing: border-box;
        padding-top: 42rpx;
    }
    .countBgThree{
        position: absolute;
        width: 94%;
        top: 0rpx;
        left: 20rpx;
        height: 130rpx;
        background: none;
        border-bottom: 10rpx solid #feeae9;
        box-sizing: border-box;
        border-radius: 10rpx;
    }
    .countdownright{
        position: absolute;
        right: 40rpx;
        top: 30rpx;
        width: 35%;
        height: 80rpx;
        text-align: right;
    }


    // 服务样式
    .serviceBox{
        display: flex;
        justify-content: space-between;

        .serviceBox_tit{
            width: 86rpx;
            height: 80rpx;
            line-height: 70rpx;
            font-size: 28rpx;
            font-weight: bold;
        }
        .serviceBox_con{
            width: 82%;
            height: 80rpx;
            // line-height: 80rpx;
            display: flex;
            padding-top: 10rpx;
            box-sizing: border-box;

            .serviceBox_con_item{
                height: 50rpx;
                line-height: 50rpx;
                font-size: 26rpx;
                display: flex;
                flex-wrap: nowrap;
                margin-right: 20rpx;
            }
            .serviceBox_con_item_img{
                width: 28rpx;
                height: 28rpx;
                margin: 11rpx 10rpx 0rpx 5rpx;
            }
        }
        .discount_lump_icon{
            line-height: 62rpx;
        }
    }

    &__countdown {
        display: inline-block;
        color: @color-red;
        .font-semi();
    }
    &__countdown-wrap {
        padding: 5px 15px;
        color: @color-red;
        .font-semi();
    }
    .good-info {
        padding: 10px 10px 10px 15px;
        .title {
            .gold-label {
                display: inline-block;
                padding: 0 5px;
                margin-right: 10px;
                border-radius: 10rpx;
                background: #FDDC37;
                box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
                transform: translateY(-10rpx);
            }
            .store-name {
                display: inline-block;
                transform: translate(10rpx,-8rpx);
            }
        }
        .price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 8px;
            .text-through {
                margin-left: 10rpx;
            }
        }
        .ad-buy {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            .icon {
                font-size: 18px;
                color: @color-font-2;
            }
        }
    }
    .evaluation {
        padding: 40rpx 0;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40rpx;
        }
        .watch-more {
            padding-top: 10px;
        }
    }

    .store-recommend {
        padding: 16px;
        .title {
            margin-bottom: 10px;
        }
        .inner {
            margin-right: -24rpx;
        }
    }
    .detail {
        .content {
            .service-box {
                padding: 40rpx 0;
            }
        }
    }
    .fixed-center {
        position: fixed;
        z-index: 3;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        .share-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-sizing: border-box;
            width: 320px;
            height: 146px;
            // padding: 14rpx 0;
            margin-top: 200px;
            margin-left: 50%;
            transform: translateX(-50%);
            border-radius: 10rpx;
            background-color: @white-color;
            image {
                width: 48px;
                height: 48px;
            }
            .share {
                image {
                    width: 44px;
                    height: 44px;
                }
            }
            .text-normal {
                margin-top: 24rpx;
            }
        }
    }
    .fixed-bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        .btn-box {
            display: flex;
            align-items: stretch;
            .price {
                display: flex;
                flex: 1;
                align-items: center;
                padding: @button-large-padding-v 14px;
                line-height: @button-large-line-height;
                background-color: @color-white;
                box-sizing: border-box;
            }
            .btn {
                width: 116px;
                border-radius: 0;
                text-align: center;
            }
        }
    }
    .tab-fixed {
        position: fixed;
        left: 0;
        width: 100%;
        width: 100%;
    }
    .share-btn {
        position: fixed;
        top: 60%;
        right: 0;
        padding: 4rpx 10px 4rpx 30rpx;
        border-radius: 10px 0 0 10px;
        font-size: 32rpx;
        color: @color-white;
        background-color: #F35555;
        z-index: 1;
    }

    &__price {
        &-item {
            display: inline-block;
            margin-left: 5px;
            padding-top: 9px;
            .text-small();
            vertical-align: top;
        }
        &-copy-btn {
            float: right;
            padding: 9px 0;
            .text-small();
            color: @test-title-color;
            white-space: nowrap;
            text-align: right;
        }
    }
}

.fixed-move-disabled {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.grey-color {
    color: #bbbbbb;
}

</style>
